<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/operationsummary/Operations' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>患者统计</el-breadcrumb-item>
    </el-breadcrumb>
    <br />
    <br />
    <!-- 页面上方的分标签页 -->
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="门诊日志" name="1st">
        <!-- 员工列表组件 -->
        <outpatient />
      </el-tab-pane>

      <el-tab-pane label="患者年龄分析" name="2st">
        <!-- 科室列表组件 -->
        <patient-age />
      </el-tab-pane>

      <el-tab-pane label="患者性别分析" name="3st">
        <!-- 角色列表组件 -->
        <patient-sex />
      </el-tab-pane>

      <el-tab-pane label="患者婚姻情况分析" name="4st">
        <!-- 诊所列表组件 -->
        <patient-marry />
      </el-tab-pane>

      <el-tab-pane label="就诊类型分析" name="5st">
        <!-- 诊所列表组件 -->
        <patient-diag />
      </el-tab-pane>
      
      <el-tab-pane label="患者来源分析" name="6st">
        <!-- 诊所列表组件 -->
        <patient-source />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>


<script>
// 导入组件
import Outpatient from "./Outpatient.vue";
import PatientAge from "./PatientAge.vue";
import PatientSex from "./PatientSex.vue";
import PatientMarry from "./PatientMarry.vue";
import PatientDiag from "./PatientDiag.vue";
import PatientSource from "./PatientSource.vue";

export default {
  // 导入的组件写到这里
  components: { Outpatient , PatientAge ,  PatientSex ,  PatientMarry , PatientDiag ,PatientSource },

  data() {
    return {
      // 默认选中的组件
      activeName: "1st",
    };
  },
  methods: {
    handleClick(tab, event) {
      // console.log(tab, event);
    },
  },
};
</script>